<template>
  <div class="table-box">
    <div class="t-header">
      <div class="header-text">{{ tableTitle }}</div>
    </div>

    <div class="t-body" ref="tBody">
      <div ref="tipBox" class="tip-text">
        <slot name="tip"></slot>
      </div>
      <div v-for="(row, index) in tableData" :key="index" class="t-row">
        <div v-for="(col, idx) in row" :key="idx" class="t-column">{{ col }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, getCurrentInstance, defineProps } from 'vue'
import commomOption from './commomOption.ts'
import * as echarts from 'echarts'
const props = defineProps(['tableData', 'tableTitle'])
console.log(props)
const tableTitle = ref(props.tableTitle)
const tableData = ref(props.tableData)

// 获取 tBody 元素
const tBody = ref()
const tipBox = ref()
function createMaxChild(params) {
  const tBodyDiv = tBody.value

  var elements = tBodyDiv.querySelectorAll('.js-create')

  while (elements.length > 0) {
    tBodyDiv.removeChild(elements[0])
  }

  // 计算 tBody 的高度
  const div1Height = tBodyDiv.offsetHeight - tipBox.value.offsetHeight

  // 计算每个子 div 的高度
  const childDivHeight = 30

  // 计算最多可以插入的子 div 个数
  const maxChildDivs = Math.floor(div1Height / childDivHeight) - tableData.value.length - 1
  // 创建文档片段
  const fragment = document.createDocumentFragment()

  // 创建子 div 并添加到文档片段中
  for (let i = 0; i < maxChildDivs; i++) {
    const div = document.createElement('div')
    div.className = 't-row js-create'
    for (let j = 0; j < tableData.value[0].length; j++) {
      const divCol = document.createElement('div')
      divCol.className = 't-column'
      div.appendChild(divCol)
    }
    fragment.appendChild(div)
  }

  // 将文档片段一次性插入到 div1 中
  tBodyDiv.appendChild(fragment)
}
nextTick(() => {
  createMaxChild()
  // 根据页面大小自动响应图表大小
  window.addEventListener('resize', function () {
    createMaxChild()
  })
})

</script>
<style lang="less">
.table-box {
  height: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;

  .t-header {
    background: url(../assets/image/table-header.png) 0px 0px no-repeat;
    background-size: 100% 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: -1px;
    z-index: 10;

    .header-text {
      font-size: 20px;
      font-weight: bold;
      color: #FFFFFF;
      background: linear-gradient(0deg, #FFFFFF 0%, #98DEFF 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .t-body {
    flex: 1;
    border: 1px solid #2B7CB5;

    .tip-text {
      padding: 8px;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 1.8;
    }
  }

  .t-row {
    display: flex;
    text-align: center;
    color: #FFFFFF;
    height: 32px;
    line-height: 32px;
    border-bottom: 1px solid rgba(43, 124, 181, .5);

    &:nth-last-child(1) {
      border-bottom: none;
    }

    &:nth-child(even) {
      background: rgba(12, 112, 189, 0.2);
    }
  }

  .t-column {
    color: white;
    flex: 1;
    padding: 0px 3px;
    border-right: 1px solid rgba(43, 124, 181, .4);

    &:nth-last-child(1) {
      border-right: none;
    }
  }
}
</style>
